<template>
<div class="f-ab">
  <div class="panel panel-default panel-zone">
    <div class="panel-body">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tabPage" data-toggle="tab">样式</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tabPage">
          <div class="form-group-item">
            <div class="flex-col-2">
              <div class="title">背景颜色:</div>
            </div>
            <div class="flex-row flex-col-6 ">
              <color-pick 
                class="color-picker" 
                :color.sync="page.style.backgroundColor">
              </color-pick>
            </div>
          </div>
          <div class="form-group-item">
            <div class="flex-col-2">
              <div class="title">背景图片:</div>
            </div>
            <div class="flex-col-6 ">
              <a class="changeIcon" href="javascript:;" @click="changePic">更换图片</a>
              <div class="img-wrap">
                <img v-show="page.style.image" :src="page.style.image | realImgSrc" alt="">
                <a v-show="page.style.image" class="delete-pic" @click="delImg" href="javascript:;" >&times;</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
  <!-- 图片选择弹窗  -->
  <picture-dialog 
    :show.sync="showPictureDialog"
    type="changePictrue">
  </picture-dialog>
</div>
</template>
<script>
export default {
  props: {
    page: {
      type: Object,
      required: true
    } 
  },
  data: function(){
    return {
       showPictureDialog: false
    }
  },
  methods:{
    changePic: function(){
      this.showPictureDialog = true;
    },
    delImg: function(){
      this.page.style.image = null;
    }
  }, 
  events: {
    changePictrue: function (imgSrc) {
      this.page.style.image = imgSrc;
    }
  },    
  components: {
    colorPick: require('../plugin/colorPick.vue'),
    pictureDialog : require('../plugin/pictureDialog.vue')
  }  
}
</script>
<style scoped>
  input[type="text"]{
    text-align: left;
  }
  .color-picker{
    margin-left:0;
  }
  .changeIcon {
    display: block;
    text-decoration: underline;
    color:#5cb85c;
    line-height: 25px;
  } 
  .img-wrap{
    display:inline-block;
    position:relative;
  }
  .img-wrap img {
    width:100px;
  }
  .delete-pic {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgba(51, 122, 183, .7);
    color: #fff;
    line-height: 24px;
    text-align: center;
    border-top-left-radius: 100%;
  }
  .delete-pic:hover{
    background-color: rgba(183, 51, 51, 0.7);
  }    
</style>